<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>Egret</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="full-screen" content="true" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />
    <style>
        html, body {
            -ms-touch-action: none;
            background: #888888;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
        }
    </style>
</head>

<body>
    <select id="examples_menu" style="width:200px;font-size:24px;" onchange="onSelectChange(this.value)"></select>
    <div id="egret-sample" style="margin: auto;width: 100%;height: 100%;" class="egret-player"
            data-entry-class="Main"
            data-orientation="auto"
            data-scale-mode="noScale"
            data-frame-rate="30"
            data-content-width="480"
            data-content-height="800"
            data-show-paint-rect="false"
            data-multi-fingered="2"
            data-show-fps="false" data-show-log="false"
            data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
    </div>
    <script>
        var list = [
            "Village",
            "Walls",
            "Cute",
            "Desert",
            "Water",
            "Sewers",
            "Hexagonal",
            "Tilesheet",
            "Terrain",
            "Test",
            "Turret",
            "Test2"
        ];
        var menu = document.getElementById("examples_menu");
        list.forEach(function (item) {
            var option = document.createElement("option");
            option.setAttribute("id", item);
            option.setAttribute("value", item);
            option.innerText = item;
            menu.appendChild(option);
        });
        function onSelectChange(value) {
            var url = location.href;
            var index = url.indexOf("?");
            if (index != -1) {
                url = url.slice(0, index);
            }
            if (url.indexOf(".html") == -1) {
                url += "index.html";
            }
            url += "?test=" + value;
            location.href = url;
        }
        function getCurrentTest() {
            var appFile;
            var hasTest = false;
            var str = location.search;
            str = str.slice(1, str.length);
            var totalArray = str.split("&");
            for (var i = 0; i < totalArray.length; i++) {
                var itemArray = totalArray[i].split("=");
                if (itemArray.length == 2) {
                    var key = itemArray[0];
                    var value = itemArray[1];
                    if (key == "test") {
                        appFile = value;
                        hasTest = true;
                        break;
                    }
                }
            }
            if (!hasTest) {
                appFile = list[0];
            }

            return appFile;
        }
        document_class = getCurrentTest();
        menu.value = document_class;
        document_class += "Example";
    </script>
    <script>
            var loadScript = function (list, callback) {
                var loaded = 0;
                var loadNext = function () {
                    loadSingleScript(list[loaded], function () {
                        loaded++;
                        if (loaded >= list.length) {
                            callback();
                        }
                        else {
                            loadNext();
                        }
                    })
                };
                loadNext();
            };

            var loadSingleScript = function (src, callback) {
                var s = document.createElement('script');
                s.async = false;
                s.src = src;
                s.addEventListener('load', function () {
                    s.parentNode.removeChild(s);
                    s.removeEventListener('load', arguments.callee, false);
                    callback();
                }, false);
                document.body.appendChild(s);
            };

            var xhr = new XMLHttpRequest();
            xhr.open('GET', './manifest.json?v=' + Math.random(), true);
            xhr.addEventListener("load", function () {
                var manifest = JSON.parse(xhr.response);
                var list = manifest.initial.concat(manifest.game);
                loadScript(list, function () {
                    var stage = document.getElementById("egret-sample");
                    console.log(document_class);
                    stage.setAttribute("data-entry-class",document_class);
                    egret.runEgret({renderMode:"canvas"});

                    if (getOption("mainClass")) {
                        document.getElementById("examples_menu").style.display = "none";
                    }
                    function getOption(key) {
                        if (window.location) {
                            var search = location.search;
                            if (search == "") {
                                return "";
                            }
                            search = search.slice(1);
                            var searchArr = search.split("&");
                            var length = searchArr.length;
                            for (var i = 0; i < length; i++) {
                                var str = searchArr[i];
                                var arr = str.split("=");
                                if (arr[0] == key) {
                                    return arr[1];
                                }
                            }
                        }
                    }
                });
            });
            xhr.send(null);
    </script>
</body>

</html>